import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { FilterItem } from 'components'
import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch, Select } from 'antd'
import { basicDictTypeData } from 'utils/seletLocalData'
import { converDate, SelectProps } from 'utils'

const Search = Input.Search
const { RangePicker } = DatePicker
const Option = Select.Option
const FormItem = Form.Item

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}

const TwoColProps = {
  ...ColProps,
  xl: 96,
}

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}

const Filter = ({
  onAdd,
  onFilterChange,
  countryCodeData,
  filter,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
}) => {
  const handleSubmit = () => {
    let fields = getFieldsValue()
    onFilterChange(fields)
  }

  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }
  const dateFormat = 'DD/MM/YYYY'
  let initialCreateTime = []
  if (filter.createTime && filter.createTime[0]) {
    initialCreateTime[0] = moment(filter.createTime[0], dateFormat)
  }
  if (filter.createTime && filter.createTime[1]) {
    initialCreateTime[1] = moment(filter.createTime[1], dateFormat)
  }
  const countryCodeList = countryCodeData.map(d => <Option key={d.code} title={d.name} >{d.name}</Option>)
  return (
    <div>
      <Row>
        <Col span={8}>
          <FormItem label="CustomerNO" {...formItemLayout}>
            {
              getFieldDecorator('customerNumber', {
                initialValue: filter.customerNumber,
              })(<Input size="large" onPressEnter={handleSubmit} />)
            }
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="CustomerName" {...formItemLayout}>
            {
              getFieldDecorator('customerName', {
                initialValue: filter.customerName,
              })(<Input size="large" onPressEnter={handleSubmit} />)
            }
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="Phone No." {...formItemLayout}>
            {
              getFieldDecorator('phoneNumber', {
                initialValue: filter.phoneNumber,
              })(<Input size="large" onPressEnter={handleSubmit} />)
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <FormItem label="CustomerID" {...formItemLayout}>
            {
              getFieldDecorator('customerId', {
                initialValue: filter.customerId,
              })(<Input size="large" onPressEnter={handleSubmit} />)
            }
          </FormItem>
        </Col>
      </Row>
      <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', marginBottom: '10px' }}>
        <div >
          <Button type="primary" size="large" className="margin-right" onClick={handleSubmit}>Search</Button>
          <Button size="large" onClick={handleReset}>Reset</Button>
        </div>
        <div>
          <Button size="large" type="ghost" onClick={onAdd}>Create</Button>
        </div>
      </div>
    </div>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
  countryCodeData: PropTypes.array,
}

export default Form.create()(Filter)
